import React, { memo, useCallback, useEffect ,useRef} from 'react'
import { useDispatch, useSelector } from 'react-redux'

import { NewAlbumWrapper ,PageWrapper} from './style'
import { Carousel } from 'antd'
import {LeftOutlined,RightOutlined } from '@ant-design/icons'
import RecommendNav from '@/components/recommend-nav'
import AlbumCover from '@/components/album-cover'
import { getNewAlbumDataAction } from '../../store/actionCreator'
export default memo(function NewAlbum() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getNewAlbumDataAction())
  },[dispatch])
  const { newAlbumList } = useSelector(state => ({
    newAlbumList:state.getIn(['recommend','newAlbumList'])
  }))
  const carouselRef = useRef()
  const next = useCallback(() => {
    carouselRef.current.next()
  },[carouselRef])
  const prev = useCallback(() => {
    carouselRef.current.prev()
  },[carouselRef])
  return (
    <NewAlbumWrapper>
      <RecommendNav title="新碟上架" arr={[]} />
      <PageWrapper>
        <LeftOutlined className="left" onClick={prev}/>
        <Carousel ref={carouselRef}>
          <div className="list page1">
          {
            newAlbumList.slice(0,5).map(item => {
              return (
                <AlbumCover key={item.id} info={item}/>
              )
            })
          }
          </div>
          <div className="list page2">
            {
              newAlbumList.slice(5).map(item => {
                return (
                  <AlbumCover key={item.id} info={item}/>
                )
              })
            }
          </div>
        </Carousel>
        <RightOutlined className="right" onClick={next}/>
      </PageWrapper>
    </NewAlbumWrapper>
  )
})
